<template>
    <div class="table-header-action">
        <slot name="prepend"></slot>
        <BaseButton type="info" icon-name="el-Refresh" @click="onClick('refresh')">刷新</BaseButton>
        <template v-if="headerActionTypes.includes('add')">
            <BaseButton v-if="authButtons.includes(`${controllerUrl}/add`)" type="primary" icon-name="el-Plus" @click="onClick('add')">
                添加
            </BaseButton>
        </template>
        <template v-if="headerActionTypes.includes('edit')">
            <BaseButton v-if="authButtons.includes(`${controllerUrl}/edit`)" type="success" icon-name="el-Edit" @click="onClick('edit')">
                编辑
            </BaseButton>
        </template>

        <template v-if="headerActionTypes.includes('reset')">
            <BaseButton
                v-if="authButtons.includes(`${controllerUrl}/reset`)"
                :disabled="!selectCount || selectCount <= 0"
                type="info"
                icon-name="el-RefreshLeft"
                @click="onClick('reset')"
            >
                密码重置
            </BaseButton>
        </template>
        <template v-if="headerActionTypes.includes('upload')">
            <Upload v-if="authButtons.includes(`${controllerUrl}/upload`)" @on-upload="onUpload"></Upload>
        </template>
        <template v-if="headerActionTypes.includes('download')">
            <BaseButton v-if="authButtons.includes(`${controllerUrl}/download`)" type="info" icon-name="icon-download" @click="onClick('download')">
                下载
            </BaseButton>
        </template>

        <template v-if="headerActionTypes.includes('import')">
            <BaseButton v-if="authButtons.includes(`${controllerUrl}/import`)" type="info" icon-name="icon-import" @click="onClick('import')">
                导入
            </BaseButton>
        </template>

        <template v-if="headerActionTypes.includes('export')">
            <BaseButton
                v-if="authButtons.includes(`${controllerUrl}/export`)"
                :disabled="!selectCount || selectCount <= 0"
                type="info"
                icon-name="icon-export"
                @click="onClick('export')"
            >
                导出
            </BaseButton>
        </template>

        <template v-if="headerActionTypes.includes('sync')">
            <BaseButton v-if="authButtons.includes(`${controllerUrl}/sync`)" type="primary" icon-name="icon-sync" @click="onClick('sync')">
                同步
            </BaseButton>
        </template>

        <template v-if="headerActionTypes.includes('delete')">
            <BaseButton
                v-if="authButtons.includes(`${controllerUrl}/delete`)"
                :disabled="!selectCount || selectCount !== 1"
                type="danger"
                icon-name="el-Delete"
                @click="onClick('delete')"
            >
                删除
            </BaseButton>
        </template>

        <template v-if="headerActionTypes.includes('batchDelete')">
            <BaseButton
                v-if="authButtons.includes(`${controllerUrl}/batchDelete`)"
                :disabled="!selectCount || selectCount < 2"
                type="danger"
                icon-name="el-DeleteFilled"
                @click="onClick('batchDelete')"
            >
                批量删除
            </BaseButton>
        </template>

        <BaseButton
            v-if="headerActionTypes.includes('expandAll')"
            type="warning"
            :icon-name="defaultExpandAll ? 'el-Fold' : 'el-Expand'"
            @click="onClick('expandAll')"
        >
            {{ defaultExpandAll ? '折叠全部' : '展开全部' }}
        </BaseButton>

        <div class="table-header-right">
            <template v-if="headerActionTypes.includes('search')">
                <el-input
                    v-if="authButtons.includes(`${controllerUrl}/search`)"
                    prefix-icon="Search"
                    v-model="searchKeyword"
                    clearable
                    type="text"
                    placeholder="请输入关键字"
                ></el-input>
            </template>

            <template v-if="headerActionTypes.includes('dynamicQuery')">
                <BaseButton
                    v-if="authButtons.includes(`${controllerUrl}/dynamicQuery`)"
                    type="info"
                    icon-name="icon-search"
                    @click="onClick('dynamicQuery')"
                >
                    动态搜索
                </BaseButton>
            </template>

            <slot name="append"></slot>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ControllerType } from '@/api/common/types'

interface Props {
    selectCount?: number
    defaultExpandAll: boolean
    controllerUrl?: ControllerType
    headerActionTypes: TableHeaderActionType[]
}
const props = withDefaults(defineProps<Props>(), {
    defaultExpandAll: false,
})
const emit = defineEmits<{ onHeaderAction: [action: TableHeaderActionType, params: any] }>()
const { authButtons } = useAdminStore()
const searchKeyword = ref('')
const debounced = refDebounced(searchKeyword, 300)

const onClick = (action: TableHeaderActionType) => {
    let params: any
    if (action === 'delete' || action === 'reset' || action === 'download') {
        params = { id: 0 }
    } else {
        params = {}
    }
    emit('onHeaderAction', action, params)
}
const onUpload = (action: TableHeaderActionType, params: any) => {
    emit('onHeaderAction', action, params)
}
watch(
    () => debounced.value,
    () => {
        emit('onHeaderAction', 'search', debounced.value)
    },
)
</script>

<style lang="scss" scoped>
.table-header-action {
    display: flex;
    justify-content: flex-start;
    align-items: center;

    border: 1px solid var(--el-border-color-lighter);
    border-bottom: none;
    padding: 10px;
    overflow: hidden;

    .table-header-right {
        margin-left: auto;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: 12px;
    }
}
</style>
